<template>
  <div>
    <div v-if="access_token" class="header">
      <router-link class="header_title" to="/">学员信息管理系统</router-link>
      <!-- <button
        class="header_Administration"
        style="background-color: rgb(68, 183, 250, 0)"
      >
        游客<i class="el-icon-caret-bottom"></i>
      </button>
      <router-link class="uls" v-if="asd" to="/zhanghaoxinxi"
        >账号信息</router-link
      >
      <div @click="tui" class="uls1" v-if="asd">退出</div> -->
      <el-dropdown class="tuichudenglu">
        <span class="el-dropdown-link" @click="btns">
        {{Yhzt}}  <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <span @click="tui">
              退出登录
            </span>
            </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <div v-if="access_token" class="foot_header">
      <el-menu
        style="height: 100%"
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        router
        :default="this.$route.path"
      >
        <el-submenu :index="String(index)" v-for="(v,index) in CaiDPanDuan" :key="index">
          <template slot="title">
              <i :class="eiforls()"></i>
            <span>{{v.name}}</span>
          </template>
          <el-menu-item-group v-for="(l,i) in v.menusons" :key="i">
            <el-menu-item @click="publics(l.name, l.address)"
              >{{l.name}}</el-menu-item>
          </el-menu-item-group>     
        </el-submenu>
        <el-menu-item class="open" @click="opens">
          <i class="el-icon-s-operation"></i>
        </el-menu-item> 

      </el-menu>
    </div>
    <div class="foot">
      <div>
        <div class="foot_herde" v-if="access_token">
          <el-tag
            closable
            :disable-transitions="false"
            @close="biaoti(tag.path)"
            @click="Y_qitabiaoti(tag.path)"
            v-for="(tag, i) in dynamicTags"
            :key="i"
          >
            {{ tag.tile }}
          </el-tag>
        </div>
      </div>
      <div>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      asd: false,
      access_token: false,
      dynamicTags: [{ tile: "系统首页", path: "/" }],
      Yhzt:localStorage.getItem('Yhzt'),
      Cdarr:[],
      eifors:[
        {ei:'el-icon-s-custom'},
        {ei:'el-icon-menu'},
        {ei:'el-icon-document'},
        {ei:'el-icon-s-order'},
        {ei:'el-icon-user-solid'},
        {ei:'el-icon-document-copy'},
        {ei:'el-icon-printer'},
        {ei:'el-icon-message-solid'},
      ],
      CaiDPanDuan:[],
      ifhttp:'',
    };
  },
  methods: {
    // 循环eleui图标
    eiforls(){
      const indexs = Math.floor((Math.random()*this.eifors.length));
      for(let i=0;i<this.eifors.length;i++){
        console.log(this.eifors[indexs])
        return this.eifors[indexs].ei
      }
    },
    // 打开菜单
    opens() {
      this.isCollapse = !this.isCollapse;
    },
    publics(tile, path) {
      if (this.$route.path == path) {
        return;
      }
      this.$router.push(path);
      for (let i = 0; i < this.dynamicTags.length; i++) {
        if (this.dynamicTags[i].path == path) {
          return;
        }
      }
      this.dynamicTags.push({
        path,
        tile,
      });
      sessionStorage.setItem("dynamicTags", JSON.stringify(this.dynamicTags));
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    btns() {
      this.asd = !this.asd;
    },
    // 其他页面标题跳转
    Y_qitabiaoti(tag) {
      if (this.$route.path != tag) {
        this.$router.push(tag);
      }
    },
    biaoti(tag) {
      console.log(tag);
      for (let i = 1; i < this.dynamicTags.length; i++) {
        if (this.dynamicTags[i].path == tag) {
          this.dynamicTags.splice(i, 1);
          console.log(this.dynamicTags);
          sessionStorage.setItem(
            "dynamicTags",
            JSON.stringify(this.dynamicTags)
          );
          if (this.$route.path != "/") {
            this.$router.push(this.dynamicTags[i - 1]);
          }
        }
      }
    },
    tui() {
      localStorage.clear();
      this.$router.push("/login");
      setTimeout(() => {
        location.reload();
      }, 10);
    },
    Cdarrs(){
      this.$http.get("/api/getmenutotal").then(res => {
        console.log(res.data);
        this.Cdarr = res.data
        console.log(this.Cdarr);
        this.CaiDanYX();
        this.ifhttp = this.$ifhttp(res.data.code);
      });
    },
    // 菜单判断是否有效
    CaiDanYX(){
      for(let i=0;i<this.Cdarr.length;i++){
        console.log(this.Cdarr[i].status)
        if(this.Cdarr[i].status == "是"){
          this.CaiDPanDuan.push(this.Cdarr[i])
        }
      }
    },
  },
  created() {
    this.access_token = localStorage.getItem("access_token");
    this.Yhzt = localStorage.getItem("Yhzt");
    if (sessionStorage.getItem("dynamicTags")) {
      this.dynamicTags = JSON.parse(sessionStorage.getItem("dynamicTags"));
    }
    this.Cdarrs()
  },
  watch:{
    'ifhttp'(val){
      if(!val){
        console.log(1)
      }else{
        alert(val)
      }
    }
  }
};
</script>

<style scoped>
.el-tag {
  margin-left: 1%;
}
html,
body,
#app {
  height: 100%;
}
.container {
  height: 100%;
}
.header {
  width: 100%;
  height: 50px;
  background: -webkit-linear-gradient(
    left,
    rgb(18, 128, 188),
    rgb(97, 183, 250),
    rgb(68, 183, 250)
  );
  line-height: 50px;
}
.header_title {
  color: white;
  margin-left: 25px;
  float: left;
  font-weight: bolder;
  font-size: 24px;
  font-family: fangsong;
  text-decoration: none;
}
/* .header_Administration {
  width: 100px;
  height: 50px;
  margin-right: 25px;
  float: right;
  color: white;
  border: 0;
} */
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-icon-s-operation {
  font-size: 24px;
  color: rgb(130, 132, 134);
}
.foot_herde {
  margin-top: 1%;
}
.foot_header {
  overflow-y: auto;
  display: inline;
  float: left;
}
.foot::after {
  content: "";
  height: 0;
  line-height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}
.foot_foot {
  margin-top: 0.5%;
}
.open {
  margin-top: 200px;
  text-align: center;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.uls {
  width: 100px;
  background-color: rgb(215, 225, 226);
  position: absolute;
  right: 20px;
  top: 50px;
  text-align: center;
  text-decoration: none;
}
/* .uls1 {
  width: 100px;
  background-color: rgb(215, 225, 226);
  position: absolute;
  right: 20px;
  top: 100px;
  text-align: center;
  text-decoration: none;
} */
.el-dropdown-link {
  cursor: pointer;
  color: white;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.tuichudenglu{
  float: right;
  margin-right: 2%
}
</style>